<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="full-screen" content="yes">

    <meta name="description" itemprop="description" content="">
    <link href="__CSS__/style.css" type="text/css" rel="stylesheet"/>
    <link href="__JS__/layer/need/layer.css" type="text/css" rel="stylesheet"/>
    <link href="__CSS__/swiper-4.3.3.min.css" type="text/css" rel="stylesheet"/>
    <link href="//at.alicdn.com/t/font_780236_ocp0nj3zlwd.css" type="text/css" rel="stylesheet"/>
    <script src="__JS__/jquery.min.js"></script>
    <script src="__JS__/layer/layer.js"></script>
    <script src="__JS__/swiper-4.3.3.min.js"></script>
</head>
<body onload="music();">
<div class="head">
    <i id="guanbi" class="iconfont icon-guanbi" style="color: #fff;position: absolute;top: 12px;left: 10px;font-size: 20px;"></i>
    <i class="stop" id="stop" onclick="music_play();"></i>
    <h4 class="header-info">{$item.model}</h4>
</div>

<div class="swiper-container gallery-top">
    <div class="swiper-wrapper">
        {volist name="data" id="vo"}
        <div class="swiper-slide">
            <div class="swiper-zoom-container">
                <img src="__UPLOADS__/{$vo.img}">
            </div>
        </div>
        {/volist}
    </div>
</div>
<div class="swiper-container gallery-thumbs">
    <div class="swiper-wrapper">
        {volist name="data" id="vo"}
        <div class="swiper-slide" style="background-image:url('__UPLOADS__/{$vo.img}')"></div>
        {/volist}

    </div>

</div>
<div id="open" style="position: fixed;z-index: 9999999999999;opacity: .3; bottom:10px; left: 10px;display: none;"><i class="iconfont icon-zhankai" style="font-size: 50px;color: #fff;"></i> </div>
<!--<audio id="music" loop="true">-->
    <!--<source src="__UPLOADS__/music/{$music}" type="audio/mpeg" id="mm"/>-->
<!--</audio>-->
</body>
<script>
    function music() {
        var music = document.getElementById('music');
        if (music) music.play();
    }

    function music_play() {
        var btn = document.getElementById('stop'),
            music = document.getElementById('music');
        if (btn.className.match(/on/)) {
            btn.className = btn.className.replace(/ on/, '');
            music.play();
        } else {
            btn.className += ' on';
            music.pause();
        }
    }

    (function ($) {

//        var is_click = null;
        $('.gallery-top,#guanbi,#open').click(function () {
//            if (is_click) clearTimeout(is_click);
//            is_click = setTimeout(function () {
//                $('.head,.gallery-thumbs').toggle();
//                if ($('.head').css('display') == 'none') {
//                    $('body').css('background-color', '#000');
//                } else {
//                    $('body').css('background-color', '#FFF');
//                }
//
//            }, 200);
            console.log(333333333)
            $('.head,.gallery-thumbs,#open').toggle();
            if ($('.head').css('display') == 'none') {
                $('body').css('background-color', '#000');
            } else {
                $('body').css('background-color', '#FFF');
            }
        });

//        $('#open').click(function(){
//            $('.head,.gallery-thumbs,#open').toggle();
//            if ($('.head').css('display') == 'none') {
//                $('body').css('background-color', '#000');
//            } else {
//                $('body').css('background-color', '#FFF');
//            }
//        });
//
//        $('.gallery-top').dblclick(function () {
////            clearTimeout(is_click);
//            console.log(11222222)
//        });


        var galleryTop = new Swiper('.gallery-top', {
//            spaceBetween: 10,
            zoom: true,
            loop: true,
            speed: 500,
            touchRatio: 0.2,
            loopedSlides: {$item['sum_img']}, //looped slides should be the same
            passiveListeners: false
        });
        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            slidesPerView: {$loopedSlides},
            touchRatio: 0.2,
            loop: true,
            speed: 500,
            loopedSlides: {$item['sum_img']}, //looped slides should be the same
            slideToClickedSlide: true,
            passiveListeners: false
        });

        galleryTop.controller.control = galleryThumbs;
        galleryThumbs.controller.control = galleryTop;

    })(jQuery);
</script>

</html>